<template>
    <Base title="告警统计">
        <div class="pageMain">
            <div style="width: 80%; height: 300px;" id="mainChart2"></div>
            <div class="bottomBox">
                <div class="btItem yellowSha">
                    <div class="leftBox1"><div class="leftJ yellowBorL"/></div>
                    <div class="flexCenter" >
                        <div class="roundCla yellowRound" />
                        <div class="btText">设备告警</div>
                        <div class="btNum">0</div>
                    </div>
                    <div class="rightBox"><div class="rightJ yellowBorR"/></div>
                </div>
                <div class="btItem blueSha">
                    <div class="leftBox1"><div class="leftJ blueBorL"/></div>
                    <div class="flexCenter" >
                        <div class="roundCla blueRound" />
                        <div class="btText">航站警告</div>
                        <div class="btNum">0</div>
                    </div>
                    <div class="rightBox"><div class="rightJ blueBorR"/></div>
                </div>
                <div class="btItem greenSha">
                    <div class="leftBox1"><div class="leftJ greenBorL"/></div>
                    <div class="flexCenter" >
                        <div class="roundCla greenRound" />
                        <div class="btText">无人机警告</div>
                        <div class="btNum">0</div>
                    </div>
                    <div class="rightBox"><div class="rightJ greenBorR"/></div>
                </div>
                <div class="btItem purpleSha">
                    <div class="leftBox1"><div class="leftJ purpleBorL"/></div>
                    <div class="flexCenter" >
                        <div class="roundCla purpleRound" />
                        <div class="btText">其他警告</div>
                        <div class="btNum">0</div>
                    </div>
                    <div class="rightBox"><div class="rightJ purpleBorR"/></div>
                </div>
            </div>
        </div>
    </Base>
  </template>
  
  <script setup>
    import * as echarts from 'echarts';
    import { onMounted, ref } from 'vue'
    import Base from '@/components/base/base.vue'

    onMounted(() => {
        var chartDom = document.getElementById('mainChart2');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            series: [
                {
                color: [
                    'rgba(57, 160, 255, 1)',
                    'rgba(127, 56, 250, 1)',
                    'rgba(54, 202, 202, 1)',
                    'rgba(250, 211, 56, 1)',
                ],
                name: 'Access From',
                type: 'pie',
                radius: ['30%', '40%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#080c1b',
                    borderWidth: 5
                },
                label: {
                    show: true,
                    formatter: '\n\r  {b}  \n{hr|}\n \n \r {d}%',
                    color: 'inherit',
                    rich: {
                    a: {
                        left: 20
                    },

                    hr: {
                        height: 5,
                        width: 5,
                        backgroundColor: 't',
                        lineHeight: 5,
                        marginBottom: 20,
                        padding: [0, -5],
                        borderRadius: 5,
                        marginLeft: 20
                        // backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
                    }
                    }
                },
                emphasis: {
                    disabled: true
                },
                labelLine: {
                    show: true,
                    length: 0,
                    length2: 50,
                    lineStyle: {
                    cap: 'round'
                    }
                },
                data: [
                    { value: 100, name: '设备告警' },
                    { value: 100, name: '航站告警' },
                    { value: 100, name: '无人机告警' },
                    { value: 100, name: '其他告警' }
                ]
                },
                {
                name: '1',
                type: 'pie',
                radius: ['44%', '45%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#40486A',
                    borderWidth: 0
                },
                label: {
                    show: false
                },
                emphasis: {
                    disabled: true,
                    label: {
                    show: false,
                    fontSize: 40,
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                    value: 1048,
                    name: 'Search Engine',
                    itemStyle: { color: 'rgba(255, 255, 255, 0.5)' }
                    }
                ]
                }
            ]
            };


        option && myChart.setOption(option);
    })
  </script>
  
  <style lang="scss" scoped>
  .pageMain {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .bottomBox {
            width: 90%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .btItem {
            width: calc(50% - 5px);
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .roundCla {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            margin-left: 12px;
        }
        .yellowRound {
            box-shadow: 0px 0px 3px 1px #FAD338;
            border: 2px solid #FAD338;
        }
        .blueRound {
            box-shadow: 0px 0px 3px 1px #006686;
            border: 2px solid #006686;
        }
        .greenRound {
            box-shadow: 0px 0px 3px 1px #36CACA;
            border: 2px solid #36CACA;
        }
        .purpleRound {
            box-shadow: 0px 0px 3px 1px #9D62F5;
            border: 2px solid #9D62F5;
        }
        .yellowSha {
            box-shadow: inset 0px 0px 10px 1px #685e2d;
            border: 1px solid #685e2d;
        }
        .blueSha {
            box-shadow: inset 0px 0px 10px 1px #204f7f;
            border: 1px solid #204f7f;
        }
        .greenSha {
            box-shadow: inset 0px 0px 10px 1px #1c5c66;
            border: 21pxpx solid #1c5c66;
        }
        .purpleSha {
            box-shadow: inset 0px 0px 10px 1px #433176;
            border: 1px solid #433176;
        }
        .btText {
            margin-left: 15px;
            color: #fff;
        }
        .btNum {
            color: #fff;
            font-weight: bold;
            font-size: 20px;
            margin-left: 50px;
        }
        .red {
            color: #F10142;
        }
        .orange {
            color: #FF4639;
        }
        .yellow {
            color: #FAC038;
        }
        .redBck {
            background-color: #F10142;
        }
        .orangeBck {
            background-color: #FF4639;
        }
        .yellowBck {
            background-color: #FAC038;
        }
        .leftBox1 {
            height: 100%;
            .leftJ {
                width: 0px;
                height: 0px;
                border-right: 6px solid transparent;
                margin: 3px 0 0 3px;
            }
        }
        .rightBox {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            .rightJ {
                width: 0px;
                height: 0px;
                border-left: 6px solid transparent;
                margin: 0px 3px 3px 0px;
            }
        }
        .yellowBorL {
            border-top: 6px solid #FAD338;
        }
        .blueBorL {
            border-top: 6px solid #006686;
        }
        .greenBorL {
            border-top: 6px solid #36CACA;
        }
        .purpleBorL {
            border-top: 6px solid #9D62F5;
        }
        .yellowBorR {
            border-bottom: 6px solid #FAD338;
        }
        .blueBorR {
            border-bottom: 6px solid #006686;
        }
        .greenBorR {
            border-bottom: 6px solid #36CACA;
        }
        .purpleBorR {
            border-bottom: 6px solid #9D62F5;
        }
        .flexCenter {
            display: flex;
            align-items: center;
        }
  }
  
  </style>
  